﻿
$(document).ready(function () {

    // Hide at load:
    $("#processing").hide();
    $("#alert").hide();

    // Attach click handler to the submit button:
    $('#submit').click(function () {
        $('#myform').submit();
    });

    // Handle the form submit event, and make the Ajax request:
    $("#myform").on("submit", function (event) {
        event.preventDefault();

        // Show the "busy" gif:
        $("#processing").show();
        var url = $(this).attr("action");
        var formData = $(this).serialize();
        $.ajax({
            url: url,
            type: "POST",
            data: formData,
            dataType: "json",
            success: function (resp) {
                // Hide the "busy" gif:
                $("#processing").hide();
                // Build the image grid and insert into div
                var items = '';
                $.each(resp, function (i, Artist) {
                    items += "<li><a href=" + Artist.page + "><img src=" + Artist.image + " /></a>"
                    items += "<h3><a href=" + Artist.page + ">" + Artist.name + "</a></h3></li>"
                });
                $('#artistgrid').html(items);
            },
            error: function () {
                $("#alert").show();
                $("#processing").hide();
            }
        })
    });
});